<html lang="en">
<head>
    <meta charset="utf-8">
    <title>总的图</title>
    <meta http-equiv="Refresh" content="1200; Url=#">
    <script src="/static/js/echarts.min.js"></script>
    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery-1.8.0.js"></script>
    <script src="/static/js/echarts.js" charset="UTF-8"></script>
    <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <!--<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> -->
    <script src="/static/js/Highcharts.js"></script>
    <script src="/static/js/exporting.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/themes/dark-unica.js"></script>

    <link rel="stylesheet" type="text/css" href="http://www.healthmall.cn/css/base.css"/>
    <link rel="shortcut icon" href="http://www.healthmall.cn/favicon.ico"/>
    <link rel="stylesheet" type="text/css" href="http://www.healthmall.cn/css/index.css"/>


    <style type="text/css">

        .count1 {
            position: relative;
            top: 60px;

        }

        .count {
            margin-top: 20px;
            font-size: 32px;
            color: #00b8ff;
            z-index: 9;
            text-align: center;

        }

        #number, #number1, #user_num, #number0 {
            font-size: 42px;
            text-shadow: 0 -1px 0 #72a441;
            color: #ffffaa;
            font-weight: 700;

        }

        #number1 {
            font-size: 42px;
            text-shadow: 0 -1px 0 #72a441;
            color: #ffffaa;
            font-weight: 700;
        }

        .clear {
            clear: both;
        }

        #container_pubu {
            box-shadow: inset 0 1px 0 #444, 0 -1px 0 #000;
            height: 140px;
            left: 55%;
            margin: -70px 0 0 -60px;
            position: absolute;
            top: 125%;
            width: 120px;
            z-index: 9;
        }

        canvas {
            display: block;
            margin: 0 auto;
        }

        .flake {
            position: absolute;
            left: 50%;
            top: 50%;
            background: #fff;
            width: .25rem;
            height: .25rem;
            margin-top: -.125rem;
            margin-left: -.125rem;
            border-radius: 50%;
            box-shadow: 0 0 20px #f6ffe1, 0 0 10px #f6ffe1;
        }

        #c {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript">
        var data0 ={{ data|safe }};
        var data1 ={{ data1|safe }};
        var total_clicks ={{ total_clicks|safe }};

        var ipdata0 ={{ ipdata|safe }};
        var ipdata1 ={{ ipdata1|safe }};
        var iptotal_clicks ={{ iptotal_clicks|safe }};

        function CurentTime(addtime) {
            var now = new Date();
            var year = now.getFullYear();       //年
            var month = now.getMonth() + 1;     //月
            var day = now.getDate();            //日

            var hh = now.getHours(); //时
            var mm = (now.getMinutes() + addtime) % 60;  //分
            if ((now.getMinutes() + addtime) / 60 > 1) {
                hh += Math.floor((now.getMinutes() + addtime) / 60);
            }

            var clock = year + "-";

            if (month < 10)
                clock += "0";

            clock += month + "-";

            if (day < 10)
                clock += "0";

            clock += day + " ";

            if (hh < 10)
                clock += "0";

            clock += hh + ":";
            if (mm < 10) clock += '0';
            clock += mm;
            return (clock);
        }
        ;


    </script>
</head>


<body style="background:black">
<header class="header" style="position: absolute;height: 70px;top: -10px">
    <div class="logo">
        <h1>
            <a href="index" title="运动健身app，健康猫官方网站">健康猫</a>
        </h1>
    </div>
    <nav class="nav">
        <ul>
            <li>
                <a target="_blank" href="/">
                    <span>首页</span>
                </a>
            </li>
            <li>
                <a target="_blank" href="http://www.healthmall.cn/newList">
                    <span>资讯</span>
                </a>
            </li>
            <li>
                <a target="_blank" href="http://www.healthmall.cn/about">
                    <span>关于我们</span>
                </a>
            </li>
            <li>
                <a target="_blank" href="http://www.healthmall.cn/join">
                    <span>加入我们</span>
                </a>
            </li>
            <li>
                <a>
                    <span>用户名:{{ request.user }}</span>
                </a>
            </li>
            <li>
                <a href="/accounts/logout">
                    <span>注销</span>
                </a>
            </li>
        </ul>
    </nav>
</header>


<div class="count1">

    <div style="height: 40px">
        <div class="count" style="float: left;position: relative;left: 20%">订单总金额：<span id="number"></span>元</div>
        <div class="count" style="float: right;position:relative;right: 20%">支付总金额：<span id="number0"></span>元</div>
    </div>

    <div class="count">订单总数：<span id="number1"></span>笔</div>
</div>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->

<div id="mainMap" style="width: 100%;padding:10px;background:black;height: 84%;z-index: 9;"></div><!-- 中国大图-->
<div id="show" class="count" style="position: relative;top: -80%;text-align: center;z-index: 9">
    <div id="usernum">新用户注册数量：<span id="user_num"></span>人</div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        //$("#usernum").hide();

        $("#sheng").hover(function () {
                    $("#usernum").show();
                },
                function () {
                    //$("#usernum").hide();
                }
        );
    });
</script>
<div id="10da1" style="height: 100%;z-index: 9"></div><!--  商品实时数据分析类别   -->

<h1 id="jwh"
    style="height: 100px;color: #fff;z-index: 9;position: absolute;top: 1000px;left: 53%;font-size: 25px"></h1>
<!-- 数据实时滚动-->
<h1 id="jwh1"
    style="height: 100px;color: #fff;z-index: 9;position: absolute;top: 1500px;left: 53%;font-size: 25px"></h1>


<div>
    <div class="orb" style="position: absolute;top: 20%;left: 30%;height: 40px;"></div><!--粒子发光特效-->
    <canvas id="c" style="position: absolute;top: 135%;left: 5%"></canvas><!--canvas粒子喷射效果-->
    <!--瀑布动画-->
    <div id="container_pubu">
        <canvas id="waterfall" style="height: 250px;width: 120px"></canvas>
    </div>
</div>
<img src="/static/img/99.png" style="position: absolute;top:10%; left:5%;">
<!--time特效 sqo-->
<iframe src="/static/time1.html" style="position: absolute;top: 12%;right:5%;width:12%;height: 30%;border: none"
        scrolling="no"></iframe>


<!-- 10大商品饼图-->
<iframe src="/pie_custom" scrolling="no"
        style="border: none;width:900px;height: 500px;float: left;position: absolute;left: -8%;top: 45%; z-index: 9"></iframe>
<div class="clear"></div>


<!--<div id="10dada" style="width:900px;height: 500px;float: left;"></div>
<!-- 10大商品饼图-->
<div id="container3"
     style="width:900px;height: 600px;float: right;position: absolute;left: 62%;top: 200px;"></div>
<!-- 各省销售金额百分比饼图-->

<div class="clear" style="height: 50px"></div>

<div style="height: 50px"></div>

<div style="z-index: 9;color: red;text-align: center;position: relative;left: 100px;margin: 10px"><h1>电商交易实时展示</h1>
</div>
<div id="container10" style="height: 500px;width: 2400px;text-align: center;position: relative;left: -150px"></div>
<!-- 电商交易实时展示-->

<!-- 各省交易金额滚动条-->
<marquee direction='left' scrollamount=10 id="sheng"
         style="height: 200px;color: #bffdff;z-index: 9;position: absolute;top: 60px;font-size: 25px;font-family: 华文细黑">
    {% for i in Heat_chart %}
        <span style="width: 100px;padding-left: 50px">{{ i.name }} 交易金额:<span style="color: #ffffaa"> {{ i.rmb }}</span></span>
    {% endfor %}

</marquee>


<!-- 表格-->
<iframe src="/tables" scrolling="no"
        style="border: none;width:400px;height: 450px;float: left;position: absolute;left: 0%;top: 50%"></iframe>
<div class="clear"></div>


<!-- 中国大图js -->
<script type="text/javascript">
    $('#document').ready(function () {
        getEcharts();
    });
</script>

<script type="text/javascript">
    var ipdict ={{ ipdict|safe }};
    var allrmblist = [];
    var iplist = [];
    var quanquan = [];
    var xian = [];
    for (var i in ipdict) {
        //{name:'上海',value:95},
        iplist.push({name: i, value: ipdict[i]});
        quanquan.push({name: i, value: null});
        //[{name:'上海'}, {name:'广州',value:0}]
        xian.push([{name: '广州', value: ipdict[i]}, {name: i}]);
        allrmblist.push(ipdict[i]);
    }
    function max_rmbs() {

        //从大到小排序allrmblist这个数组，得到它的最大值，赋值给坐标的最大的点
        for (var x = 0; x <= allrmblist.length; x++) {
            for (var y = 0; y <= allrmblist.length - x - 1; y++) {
                if (allrmblist[y] > allrmblist[y + 1]) {
                    var tmp = allrmblist[y];
                    allrmblist[y] = allrmblist[y + 1];
                    allrmblist[y + 1] = tmp;
                }
            }
        }
        return allrmblist[allrmblist.length - 1]
    }


    function getEcharts() {
        // Step:3 conifg ECharts's path, link to echarts.js from current page.
        // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
        require.config({
            paths: {
                echarts: '/static/js'
            }
        });

        // Step:4 require echarts and use it in the callback.
        // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
        require(
                [
                    'echarts',
                    'echarts/chart/map'
                ],
                function (ec) {
                    // --- 地图 ---
                    var myChart2 = ec.init(document.getElementById('mainMap'));
                    myChart2.setOption({
                        dataRange: {
                            min: 0,
                            max: max_rmbs(),//8000,
                            calculable: true,
                            color: ['#ff3333', 'orange', 'yellow', 'lime', 'aqua'],//color: ['#ff3333',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        series: [
                            {
                                name: '全国',
                                type: 'map',
                                roam: false,
                                hoverable: false,
                                mapType: 'china',
                                itemStyle: {
                                    normal: {
                                        borderColor: 'rgba(100,149,237,1)',
                                        borderWidth: 0.5,
                                        areaStyle: {
                                            color: '#1b1b1b'
                                        }
                                    }
                                },
                                data: [],
                                markLine: {
                                    smooth: true,
                                    symbol: ['none', 'circle'],
                                    symbolSize: 1,
                                    itemStyle: {
                                        normal: {
                                            color: '#fff',
                                            borderWidth: 1,
                                            borderColor: 'rgba(30,144,255,0.5)'
                                        }
                                    },
                                    data: [],
                                },
                                geoCoord: {

                                    '东莞': [113.8953, 22.901],
                                    '东营': [118.7073, 37.5513],
                                    '中山': [113.4229, 22.478],
                                    '临汾': [111.4783, 36.1615],
                                    '临沂': [118.3118, 35.2936],
                                    '丹东': [124.541, 40.4242],
                                    '丽水': [119.5642, 28.1854],
                                    '乌鲁木齐': [87.9236, 43.5883],
                                    '佛山': [112.8955, 23.1097],
                                    '保定': [115.0488, 39.0948],
                                    '兰州': [103.5901, 36.3043],
                                    '包头': [110.3467, 41.4899],

                                    '北海': [109.314, 21.6211],
                                    '南京': [118.8062, 31.9208],
                                    '南宁': [108.479, 23.1152],
                                    '南昌': [116.0046, 28.6633],
                                    '南通': [121.1023, 32.1625],
                                    '厦门': [118.1689, 24.6478],
                                    '台州': [121.1353, 28.6688],
                                    '合肥': [117.29, 32.0581],
                                    '呼和浩特': [111.4124, 40.4901],
                                    '咸阳': [108.4131, 34.8706],
                                    '哈尔滨': [127.9688, 45.368],
                                    '唐山': [118.4766, 39.6826],
                                    '嘉兴': [120.9155, 30.6354],
                                    '大同': [113.7854, 39.8035],
                                    '大连': [122.2229, 39.4409],

                                    '太原': [112.3352, 37.9413],
                                    '威海': [121.9482, 37.1393],
                                    '宁波': [121.5967, 29.6466],
                                    '宝鸡': [107.1826, 34.3433],
                                    '宿迁': [118.5535, 33.7775],
                                    '常州': [119.4543, 31.5582],
                                    '广州': [113.5107, 23.2196],
                                    '廊坊': [116.521, 39.0509],
                                    '延安': [109.1052, 36.4252],
                                    '张家口': [115.1477, 40.8527],
                                    '徐州': [117.5208, 34.3268],
                                    '德州': [116.6858, 37.2107],
                                    '惠州': [114.6204, 23.1647],
                                    '成都': [103.9526, 30.7617],
                                    '扬州': [119.4653, 32.8162],
                                    '承德': [117.5757, 41.4075],
                                    '拉萨': [91.1865, 30.1465],
                                    '无锡': [120.3442, 31.5527],
                                    '日照': [119.2786, 35.5023],
                                    '昆明': [102.9199, 25.4663],
                                    '杭州': [119.5313, 29.8773],
                                    '枣庄': [117.323, 34.8926],
                                    '柳州': [109.3799, 24.9774],
                                    '株洲': [113.5327, 27.0319],
                                    '武汉': [114.3896, 30.6628],
                                    '汕头': [117.1692, 23.3405],
                                    '江门': [112.6318, 22.1484],
                                    '沈阳': [123.1238, 42.1216],
                                    '沧州': [116.8286, 38.2104],
                                    '河源': [114.917, 23.9722],
                                    '泉州': [118.3228, 25.1147],
                                    '泰安': [117.0264, 36.0516],
                                    '泰州': [120.0586, 32.5525],
                                    '济南': [117.1582, 36.8701],
                                    '济宁': [116.8286, 35.3375],
                                    '海口': [110.3893, 19.8516],
                                    '淄博': [118.0371, 36.6064],
                                    '淮安': [118.927, 33.4039],
                                    '深圳': [114.5435, 22.5439],
                                    '清远': [112.9175, 24.3292],
                                    '温州': [120.498, 27.8119],
                                    '渭南': [109.7864, 35.0299],
                                    '湖州': [119.8608, 30.7782],
                                    '湘潭': [112.5439, 27.7075],
                                    '滨州': [117.8174, 37.4963],
                                    '潍坊': [119.0918, 36.524],
                                    '烟台': [120.7397, 37.5128],
                                    '玉溪': [101.9312, 23.8898],
                                    '珠海': [113.7305, 22.1155],
                                    '盐城': [120.2234, 33.5577],
                                    '盘锦': [121.9482, 41.0449],
                                    '石家庄': [114.4995, 38.1006],
                                    '福州': [119.4543, 25.9222],
                                    '秦皇岛': [119.2126, 40.0232],
                                    '绍兴': [120.564, 29.7565],
                                    '聊城': [115.9167, 36.4032],
                                    '肇庆': [112.1265, 23.5822],
                                    '舟山': [122.2559, 30.2234],
                                    '苏州': [120.6519, 31.3989],
                                    '莱芜': [117.6526, 36.2714],
                                    '菏泽': [115.6201, 35.2057],
                                    '营口': [122.4316, 40.4297],
                                    '葫芦岛': [120.1575, 40.578],
                                    '衡水': [115.8838, 37.7161],
                                    '衢州': [118.6853, 28.8666],
                                    '西宁': [101.4038, 36.8207],
                                    '西安': [109.1162, 34.2004],
                                    '贵阳': [106.6992, 26.7682],
                                    '连云港': [119.1248, 34.552],
                                    '邢台': [114.8071, 37.2821],
                                    '邯郸': [114.4775, 36.535],
                                    '郑州': [113.4668, 34.6234],
                                    '鄂尔多斯': [108.9734, 39.2487],

                                    '金华': [120.0037, 29.1028],
                                    '铜川': [109.0393, 35.1947],
                                    '银川': [106.3586, 38.1775],
                                    '镇江': [119.4763, 31.9702],
                                    '长春': [125.8154, 44.2584],
                                    '长沙': [113.0823, 28.2568],
                                    '长治': [112.8625, 36.4746],
                                    '阳泉': [113.4778, 38.0951],
                                    '青岛': [120.4651, 36.3373],
                                    '韶关': [113.7964, 24.7028],
                                    '青海': [101.605943, 36.752842],
                                    '香港': [114.1529, 22.542716],
                                    '浙江': [120.040035, 30.350837],
                                    '甘肃': [103.66644, 36.218003],
                                    '福建': [119.156964, 26.182279],
                                    '澳门': [113.417008, 22.337477],
                                    '四川': [103.924003, 30.796585],
                                    '北京': [116.39737, 39.939502],
                                    '河北': [114.336873, 38.21885],
                                    '辽宁': [123.241164, 41.948112],
                                    '内蒙古': [111.614073, 40.951504],
                                    '江苏': [118.715429, 32.246466],
                                    '湖南': [112.800698, 28.474291],
                                    '安徽': [117.170056, 31.99595],
                                    '云南': [102.599397, 25.248948],
                                    '湖北': [114.116105, 30.764814],
                                    '宁夏': [106.094884, 38.624116],
                                    '吉林': [125.228072, 43.894927],
                                    '海南': [110.179083, 19.921006],
                                    '江西': [115.808656, 28.774611],
                                    '上海': [121.36464, 31.303465],
                                    '山东': [116.912494, 36.812038],
                                    '陕西': [108.780889, 34.408508],
                                    '西藏': [90.972306, 29.838888],
                                    '广东': [113.233035, 23.224606],
                                    '山西': [112.349964, 38.044464],
                                    '重庆': [106.32485, 29.895013],
                                    '天津': [117.133262, 39.256321],
                                    '黑龙江': [126.479088, 45.985284],
                                    '台湾': [121.36464, 25.248948],
                                    '贵州': [106.499624, 26.844365],
                                    '广西': [108.265765, 23.020403],
                                    '新疆': [87.476819, 43.894927],
                                    '河南': [113.453802, 34.895028],

                                },
                                markPoint: {
                                    symbol: 'emptyCircle',
                                    symbolSize: function (v) {
                                        return 10 + v / 10
                                    },
                                    effect: {
                                        show: true,
                                        shadowBlur: 0
                                    },
                                    itemStyle: {
                                        normal: {
                                            label: {show: false}
                                        },
                                        emphasis: {
                                            label: {position: 'top'}
                                        }
                                    },
                                    data: quanquan/* [
                                     {name:'上海',value:0},
                                     {name:'广州',value:0},
                                     {name:'大连',value:0},
                                     {name:'南宁',value:0},
                                     {name:'南昌',value:0},
                                     {name:'拉萨',value:0},
                                     {name:'长春',value:0},
                                     {name:'包头',value:0},
                                     {name:'重庆',value:0},
                                     {name:'常州',value:0},
                                     {name:'新疆',value:0},
                                     {name:'湖北',value:0}
                                     ]*/
                                }
                            },
                            {
                                name: '北京 Top10',
                                type: 'map',
                                mapType: 'china',
                                data: [],
                                markLine: {
                                    smooth: true,
                                    effect: {
                                        show: true,
                                        scaleSize: 1,
                                        period: 30,
                                        color: '#fff',
                                        shadowBlur: 10
                                    },
                                    itemStyle: {
                                        normal: {
                                            label: {show: true},
                                            borderWidth: 1,
                                            lineStyle: {
                                                type: 'solid',
                                                shadowBlur: 10
                                            }
                                        }
                                    },
                                    data: xian/*[
                                     [{name:'上海'}, {name:'广州',value:0}],
                                     [{name:'广州'}, {name:'广州',value:0}],
                                     [{name:'黑龙'}, {name:'广州',value:0}],
                                     [{name:'广西'}, {name:'广州',value:0}],
                                     [{name:'江西'}, {name:'广州',value:0}],
                                     [{name:'拉萨'}, {name:'广州',value:0}],
                                     [{name:'辽宁'}, {name:'广州',value:0}],
                                     [{name:'北京'}, {name:'广州',value:30}],
                                     [{name:'重庆'}, {name:'广州',value:20}],
                                     [{name:'青海'}, {name:'广州',value:10}],
                                     [{name:'陕西'}, {name:'广州',value:10}],
                                     [{name:'新疆'}, {name:'广州',value:90}],
                                     [{name:'台湾'}, {name:'广州',value:90}]
                                     ]*/
                                },
                                markPoint: {
                                    symbol: 'emptyCircle',
                                    symbolSize: function (v) {
                                        return 0.1
                                    },
                                    effect: {
                                        show: true,
                                        shadowBlur: 10
                                    },
                                    itemStyle: {
                                        normal: {
                                            label: {
                                                show: true,
                                                position: 'top',
                                                textStyle: {
                                                    fontSize: 14
                                                }
                                            }
                                        },
                                        emphasis: {
                                            label: {show: false}
                                        }
                                    },
                                    data: iplist/*[
                                     {name:'上海',value:95},
                                     {name:'广州',value:90},
                                     {name:'大连',value:80},
                                     {name:'南宁',value:70},
                                     {name:'南昌',value:60},
                                     {name:'拉萨',value:50},
                                     {name:'长春',value:40},
                                     {name:'包头',value:1000},
                                     {name:'重庆',value:20},
                                     {name:'常州',value:10}
                                     ]*/
                                }
                            }
                        ]
                    });
                });
    }

    /*
     var jiang1 = document.getElementById("sheng");

     function sheng_num() {


     var j = 0;
     setInterval(function () {
     if (j == iplist.length) {
     j = 0;
     }
     console.log(iplist[j]);
     jiang1.innerHTML = iplist[j]['name'] + ' 交易金额:' + iplist[j]['value'];

     j++;

     }, 3000);

     // i++;
     }
     sheng_num()*/
</script>


<!-- 交易金额js-->
<script>
    function magic_number0(value) {
        var num = $("#number0");
        num.animate({count: value}, {
            duration: 500,
            step: function () {
                num.text(String(parseInt(this.count)));
            }
        });
    }
    ;

    function update() {
        $.getJSON("http://121.201.68.21:8080/zhifu.php?jsonp=?", function (data) {
            magic_number0(data.n);
        });
    }
    ;

    setInterval(update, 3000);
    update();
</script>
<script>
    function magic_number(value) {
        var num = $("#number");
        num.animate({count: value}, {
            duration: 500,
            step: function () {
                num.text(String(parseInt(this.count)));
            }
        });
    }
    ;

    function update() {
        $.getJSON("http://121.201.68.21:8080/number.php?jsonp=?", function (data) {
            magic_number(data.n);
        });
    }
    ;

    setInterval(update, 30000);
    update();
</script>

<script>
    function magic_number1(value) {
        var num = $("#number1");
        num.animate({count: value}, {
            duration: 500,
            step: function () {
                num.text(String(parseInt(this.count)));
            }
        });
    }
    ;

    function update() {
        $.getJSON("http://121.201.68.21:8080/number1.php?jsonp=?", function (data) {
            magic_number1(data.n);
        });
    }
    ;

    setInterval(update, 30000);
    update();
</script>

<script>
    function user_num(value) {
        var num = $("#user_num");
        num.animate({count: value}, {
            duration: 500,
            step: function () {
                num.text(String(parseInt(this.count)));
            }
        });
    }
    ;

    function update() {
        $.getJSON("http://121.201.68.21:8080/user_num.php?jsonp=?", function (data) {
            user_num(data.n);
        });
    }
    ;

    setInterval(update, 30000);
    update();
</script>


<!-- 电商交易量实时展示js-->
<script>
    var time_list ={{ time_list|safe }};
    var rmb_list ={{ rmb_list|safe }};
    var num_list ={{ num_list|safe }};
    $(document).ready(function () {
        // 字典 dict
        var auto = function () {
            $.getJSON('/real_time_time_list/', function (trn_list) {
                //返回值  在这里是一个数组
                //for (var i in ret) {console.log(ret[i]);}
                dsjysszs(trn_list[0], trn_list[1], trn_list[2]);
                console.log(trn_list);


            });
        };

        //setInterval(auto, 100000);
    });
    function dsjysszs(time_list, rmb_list, num_list) {
        function maxrmb() {
            var maxrmb_list = [];
            for (var index in rmb_list) {
                maxrmb_list.push(rmb_list[index]);
            }

            for (var x = 0; x <= maxrmb_list.length; x++) {
                for (var y = 0; y <= maxrmb_list.length - x - 1; y++) {
                    if (maxrmb_list[y] > maxrmb_list[y + 1]) {
                        var tmp = maxrmb_list[y];
                        maxrmb_list[y] = maxrmb_list[y + 1];
                        maxrmb_list[y + 1] = tmp;
                    }
                }
            }
            return maxrmb_list[maxrmb_list.length - 1];

        }

        var maxrmb = maxrmb();

        function maxnum() {
            var maxnum_list = [];
            for (var index in num_list) {
                maxnum_list.push(num_list[index]);
            }

            for (var x = 0; x <= maxnum_list.length; x++) {
                for (var y = 0; y <= maxnum_list.length - x - 1; y++) {
                    if (maxnum_list[y] > maxnum_list[y + 1]) {
                        var tmp = maxnum_list[y];
                        maxnum_list[y] = maxnum_list[y + 1];
                        maxnum_list[y + 1] = tmp;
                    }
                }
            }
            return maxnum_list[maxnum_list.length - 1];

        }

        var maxnum = maxnum();

        var dom = document.getElementById("container10");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

        app.title = '多 Y 轴示例';

        var colors = ['#5793f3', '#d14a61', '#675bba', '#ae9ef1'];

        var option = {

            color: colors,

            tooltip: {
                trigger: 'axis'
            },


            grid: {
                right: '20%',

            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                //data:['交易金额','交易订单数'],
                data: [{
                    name: '交易金额',
                    textStyle: {color: "#5793f3"}
                }, {
                    name: '交易订单数',
                    textStyle: {color: "#d14a61"}
                }]
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#c7d0d4',
                            width: 2
                        }
                    },
                    data: time_list//['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '交易金额',
                    min: 0,
                    max: maxrmb,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[3]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {},
                {
                    type: 'value',
                    name: '交易订单数',
                    min: 0,
                    max: maxnum,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[3],

                        }
                    },
                    axisLabel: {
                        formatter: '{value} 笔'
                    }
                }
            ],
            series: [
                {
                    name: '交易金额',
                    type: 'bar',
                    data: rmb_list//[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
                },

                {
                    name: '交易订单数',
                    type: 'line',
                    yAxisIndex: 2,
                    data: num_list//[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }

    dsjysszs(time_list, rmb_list, num_list);
</script>

<!--  ip访问统计矩形图 -->
<script type="text/javascript">
    /*
     $(function () {
     $('#container4').highcharts({
     chart: {
     type: 'bar',
     backgroundColor: 'rgba(255, 255, 255, 0)',
     plotBorderColor : null,
     plotBackgroundColor: null,
     plotBackgroundImage:null,
     plotBorderWidth: null,
     plotShadow: false,
     },
     title: {
     text:  '访问来源ip各省统计矩形图, '+CurentTime(0)+' 总数:'+iptotal_clicks
     },
     subtitle: {
     text: ''
     },
     xAxis: {
     name: ' ',
     categories: ipdata0//['Africa', 'America', 'Asia', 'Europe', 'Oceania']
     ,
     title: {
     text: null
     }
     },
     yAxis: {
     min: 0,
     title: {
     text: ' ',
     align: 'high'
     },
     labels: {
     overflow: 'justify'
     }
     },
     tooltip: {
     valueSuffix: ' '
     },
     plotOptions: {
     bar: {
     dataLabels: {
     enabled: true
     }
     }
     },
     legend: {
     layout: 'vertical',
     align: 'right',
     verticalAlign: 'top',
     x: -40,
     y: 100,
     floating: true,
     borderWidth: 1,
     backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'White'),
     shadow: true
     },
     credits: {
     enabled: false
     },
     series: [ {
     name: '访问来源ip数量',
     data: ipdata1//[133, 156, 947, 408, 6]
     }]
     });
     });
     */
</script>


<!-- 各省销售金额百分比饼图 -->
<script type="text/javascript">
    var ipdata3 ={{ ipdata3|safe }};
    var province_list ={{ province_list|safe }};
    var province__list ={{ province__list|safe }};
    var province_rmb_list ={{ province_rmb_list|safe }};
    province__list.push("其他");

    var dom = document.getElementById("container3");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        title: {
            text: '各省销售金额百分比',
            subtext: '',
            x: 'center',
            y: '20%',
            textAlign: 'left',
            textStyle: {
                fontWeight: '900',
                //标题颜色
                color: '#3c97ec',

            },

        },


        series: [
            {
                name: '各省销售金额比例',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: province_rmb_list
                ,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }


    //访问来源ip各省比例饼图
    /*
     $(function () {
     Highcharts.chart('container3', {
     chart: {
     plotBackgroundColor: null,
     plotBorderWidth: null,
     plotShadow: false,
     type: 'pie',
     backgroundColor: 'rgba(255, 255, 255, 0)',
     plotBorderColor : null,
     plotBackgroundColor: null,
     plotBackgroundImage:null,
     plotBorderWidth: null,
     plotShadow: false
     },
     title: {
     text: '访问来源ip各省比例饼图, '+CurentTime(0)

     },
     tooltip: {
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
     },
     plotOptions: {
     pie: {
     allowPointSelect: true,
     cursor: 'pointer',
     dataLabels: {
     enabled: true,
     format: '<b>{point.name}</b>: {point.percentage:.1f} %',
     style: {
     color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
     }
     }
     }
     },
     series: [{
     name: '访问来源ip各省百分比',
     colorByPoint: true,
     data:ipdata3 /*[{
     name: 'Microsoft Internet Explorer',
     y: 56.33
     }, {
     name: 'Chrome',
     y: 24.03,
     sliced: true,
     selected: true
     }, {
     name: 'Firefox',
     y: 10.38
     }, {
     name: 'Safari',
     y: 4.77
     }, {
     name: 'Opera',
     y: 0.91
     }, {
     name: 'Proprietary or Undetectable',
     y: 0.2
     }]
     }]
     });
     });*/


</script>

<!-- 10大商品种类-->
<script type="text/javascript">


    var goods_list ={{ goods_list|safe }};
    var goods_and_rmb ={{ goods_and_rmb|safe }};
    var commodity_categories ={{ commodity_categories |safe }};


    // 基于准备好的dom，初始化echarts实例
    /*
     var dom = document.getElementById("10da");
     var myChart = echarts.init(dom);
     var app = {};
     option = null;

     // 指定图表的配置项和数据
     var option = {

     tooltip: {
     trigger: 'item',
     formatter: "{a} <br/>{b} : {c} ({d}%)"
     },

     title: {
     text: '各个商品销售金额占比',
     subtext: '',
     x: 'center',
     y: 'top',
     textAlign: 'left',
     textStyle: {
     fontWeight: 'normal',              //标题颜色
     color: '#408829',
     borderWidth: 100
     },

     },

     legend: {
     orient: 'vertical',
     x: 'left',
     textStyle: {color: "#25c36c"},
     //data: goods_list//['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']
     },

     series: [
     {
     name: '销售金额占比',
     type: 'pie',
     selectedMode: 'single',
     radius: [1, '30%'],

     label: {
     normal: {
     position: 'inner'
     }
     },
     labelLine: {
     normal: {
     show: false
     }
     },


     data: commodity_categories
     },
     {
     name: '销售金额占比',
     type: 'pie',

     radius: ['40%', '55%'],

     data: goods_and_rmb
     }
     ]
     };

     // 使用刚指定的配置项和数据显示图表。
     myChart.setOption(option);

</script>


<script src="/static/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/static/follow.js" type="text/javascript"></script>


<script type="text/javascript">
    //10大商品矩形和饼图
    function shidagoods() {


        var dom = document.getElementById("10da1");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '实时数据分析类别 ';

        var charts ={{ charts|safe }};

        var all ={{ all|safe }};
        var components ={{ components|safe }};
        var builderJson = {
            "all": all,//10887,
            "charts": charts/*{
             "map": 3237,
             "lines": 2164,
             "bar": 7561,
             "line": 7778,
             "pie": 7355,
             "scatter": 2405,
             "candlestick": 1842,
             "radar": 2090,
             "heatmap": 1762,
             "treemap": 1593,
             "graph": 2060,
             "boxplot": 1537,
             "parallel": 1908,
             "gauge": 2107,
             "funnel": 1692,
             "sankey": 1568
             }*/,

            "components": components /*{
             "geo": 2788,
             "title": 9575,
             "legend": 9400,
             "tooltip": 9466,
             "grid": 9266,
             "markPoint": 3419,
             "markLine": 2984,
             "timeline": 2739,
             "dataZoom": 2744,
             "visualMap": 2466,
             "toolbox": 3034,
             "polar": 1945
             }*/,


        };

        var downloadJson = charts/*{
         "echarts.min.js": 17365,
         "echarts.simple.min.js": 4079,
         "echarts.common.min.js": 6929,
         "echarts.js": 14890
         }*/;

        var themeJson = components/*{
         "dark.js": 1594,
         "infographic.js": 925,
         "shine.js": 1608,
         "roma.js": 721,
         "macarons.js": 2179,
         "vintage.js": 1982
         }*/;

        var waterMarkText = ' ';

        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        canvas.width = canvas.height = 100;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.globalAlpha = 0.08;
        ctx.font = '20px Microsoft Yahei';
        ctx.translate(50, 50);
        ctx.rotate(-Math.PI / 4);
        ctx.fillText(waterMarkText, 0, 0);

        option = {
            backgroundColor: {
                type: 'pattern',
                image: canvas,
                repeat: 'repeat'
            },
            tooltip: {},
            title: [{
                text: '商品种类分析',
                //subtext: '总计 ' + builderJson.all,
                x: '25%',
                textAlign: 'center',
                textStyle: {color: "#ff9b64"},
            }, {
                text: '商品大类',
                /*subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
                 return all + downloadJson[key];
                 }, 0),*/
                x: '75%',

                textStyle: {color: "#65fb97"},
                textAlign: 'center'
            }, {
                text: '商品小类',
                /*subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
                 return all + themeJson[key];
                 }, 0),*/
                x: '75%',
                y: '50%',
                textStyle: {color: "#65fb97"},
                textAlign: 'center'
            }],
            grid: [{
                top: 50,
                width: '50%',
                bottom: '45%',
                left: 10,
                containLabel: true
            }, {
                top: '55%',
                width: '50%',
                bottom: 0,
                left: 10,
                containLabel: true
            }],
            xAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#c7d0d4',
                        width: 2
                    }
                },
                max: builderJson.all,

                splitLine: {
                    show: false
                }
            }, {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: '#c7d0d4',
                        width: 2
                    }
                },
                max: builderJson.all,

                gridIndex: 1,
                splitLine: {
                    show: false
                }
            }],
            yAxis: [{
                type: 'category',

                data: Object.keys(builderJson.charts),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                },
                axisLine: {
                    lineStyle: {
                        color: '#b2a2f7',
                        width: 2
                    }
                },
                splitLine: {
                    show: false
                }
            }, {
                gridIndex: 1,
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#b2a2f7',
                        width: 2
                    }
                },
                data: Object.keys(builderJson.components),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                },
                splitLine: {
                    show: false
                }
            }],
            series: [{
                type: 'bar',
                stack: 'chart',
                z: 3,
                label: {
                    normal: {
                        position: 'right',
                        show: true
                    }
                },
                data: Object.keys(builderJson.charts).map(function (key) {
                    return builderJson.charts[key];
                }), itemStyle: {normal: {color: '#65fb97'}}
            }, {
                type: 'bar',
                stack: 'chart',
                silent: true,
                itemStyle: {
                    normal: {
                        color: 'black'
                    }
                },
                data: Object.keys(builderJson.charts).map(function (key) {
                    return builderJson.all - builderJson.charts[key];
                })
            }, {
                type: 'bar',
                stack: 'component',
                xAxisIndex: 1,
                yAxisIndex: 1,
                z: 3,
                label: {
                    normal: {
                        position: 'right',
                        show: true
                    }
                },
                data: Object.keys(builderJson.components).map(function (key) {
                    return builderJson.components[key];
                }), itemStyle: {normal: {color: '#85cee9'}}
            }, {
                type: 'bar',
                stack: 'component',
                silent: true,
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: '1B1B1B'
                    }
                },
                data: Object.keys(builderJson.components).map(function (key) {
                    return builderJson.all - builderJson.components[key];
                })
            }, {
                type: 'pie',
                radius: [0, '43%'],
                center: ['75%', '25%'],
                data: Object.keys(downloadJson).map(function (key) {
                    return {
                        name: key.replace('.js', ''),
                        value: downloadJson[key]
                    }
                })
            }, {
                type: 'pie',
                radius: [0, '43%'],
                center: ['75%', '75%'],
                data: Object.keys(themeJson).map(function (key) {
                    return {
                        name: key.replace('.js', ''),
                        value: themeJson[key]
                    }
                })
            }]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);

        }
        ;


        var data = charts;

        var data1 = [];
        for (var k in data) {
            data1.push(k)
        }
        var jiang = document.getElementById("jwh");
        var i = 0;

        function aaa() {


            var j = 0;
            setInterval(function () {
                if (j == data1.length) {
                    j = 0;
                }

                jiang.innerHTML = data1[j] + '<br>' + data[data1[j]];
                console.log(data1[j]);
                j++;

            }, 3000);

            // i++;
        }

        aaa();


        var data2 = components;

        var data3 = [];
        for (var k1 in data2) {
            data3.push(k1)
        }
        var jiang1 = document.getElementById("jwh1");
        var i = 0;

        function bbb() {


            var j = 0;
            setInterval(function () {
                if (j == data3.length) {
                    j = 0;
                }

                jiang1.innerHTML = data3[j] + '<br>' + data2[data3[j]];
                console.log(data3[j]);
                j++;

            }, 3000);

            // i++;
        }

        bbb();
    }
    shidagoods()
</script>

<script>
    //瀑布动画
    var waterfallCanvas = function (c, cw, ch) {

        var _this = this;
        this.c = c;
        this.ctx = c.getContext('2d');
        this.cw = cw;
        this.ch = ch;

        this.particles = [];
        this.particleRate = 6;
        this.gravity = .15;

        this.init = function () {
            this.loop();
        };

        this.reset = function () {
            this.ctx.clearRect(0, 0, this.cw, this.ch);
            this.particles = [];
        };

        this.rand = function (rMi, rMa) {
            return ~~((Math.random() * (rMa - rMi + 1)) + rMi);
        };

        this.Particle = function () {
            var newWidth = _this.rand(1, 20);
            var newHeight = _this.rand(1, 45);
            this.x = _this.rand(10 + (newWidth / 2), _this.cw - 10 - (newWidth / 2));
            this.y = -newHeight;
            this.vx = 0;
            this.vy = 0;
            this.width = newWidth;
            this.height = newHeight;
            this.hue = _this.rand(200, 220);
            this.saturation = _this.rand(30, 60);
            this.lightness = _this.rand(30, 60);
        };

        this.Particle.prototype.update = function (i) {
            this.vx += this.vx;
            this.vy += _this.gravity;
            this.x += this.vx;
            this.y += this.vy;
        };

        this.Particle.prototype.render = function () {
            _this.ctx.strokeStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, .05)';
            _this.ctx.beginPath();
            _this.ctx.moveTo(this.x, this.y);
            _this.ctx.lineTo(this.x, this.y + this.height);
            _this.ctx.lineWidth = this.width / 2;
            _this.ctx.lineCap = 'round';
            _this.ctx.stroke();
        };

        this.Particle.prototype.renderBubble = function () {
            _this.ctx.fillStyle = 'hsla(' + this.hue + ', 40%, 40%, 1)';
            _this.ctx.fillStyle = 'hsla(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness + '%, .3)';
            _this.ctx.beginPath();
            _this.ctx.arc(this.x + this.width / 2, _this.ch - 20 - _this.rand(0, 10), _this.rand(1, 8), 0, Math.PI * 2, false);
            _this.ctx.fill();
        };

        this.createParticles = function () {
            var i = this.particleRate;
            while (i--) {
                this.particles.push(new this.Particle());
            }
        };

        this.removeParticles = function () {
            var i = this.particleRate;
            while (i--) {
                var p = this.particles[i];
                if (p.y > _this.ch - 20 - p.height) {
                    p.renderBubble();
                    _this.particles.splice(i, 1);
                }
            }
        };

        this.updateParticles = function () {
            var i = this.particles.length;
            while (i--) {
                var p = this.particles[i];
                p.update(i);
            }
            ;
        };

        this.renderParticles = function () {
            var i = this.particles.length;
            while (i--) {
                var p = this.particles[i];
                p.render();
            }
            ;
        };

        this.clearCanvas = function () {
            this.ctx.globalCompositeOperation = 'destination-out';
            this.ctx.fillStyle = 'rgba(255,255,255,.06)';
            this.ctx.fillRect(0, 0, this.cw, this.ch);
            this.ctx.globalCompositeOperation = 'lighter';
        };

        this.loop = function () {
            var loopIt = function () {
                requestAnimationFrame(loopIt, _this.c);
                _this.clearCanvas();
                _this.createParticles();
                _this.updateParticles();
                _this.renderParticles();
                _this.removeParticles();
            };
            loopIt();
        };

    };

    var isCanvasSupported = function () {
        var elem = document.createElement('canvas');
        return !!(elem.getContext && elem.getContext('2d'));
    };

    var setupRAF = function () {
        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
        }
        ;

        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = function (callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function () {
                    callback(currTime + timeToCall);
                }, timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };
        }
        ;

        if (!window.cancelAnimationFrame) {
            window.cancelAnimationFrame = function (id) {
                clearTimeout(id);
            };
        }
        ;
    };

    if (isCanvasSupported()) {
        var c = document.getElementById('waterfall');
        var cw = c.width = 100;
        var ch = c.height = 140;
        var waterfall = new waterfallCanvas(c, cw, ch);
        setupRAF();
        waterfall.init();
    }
</script>


<script src='http://www.5iweb.com.cn/resource/5iweb2016121201/js/js/amxzqr.js'></script>

<script src="http://www.5iweb.com.cn/resource/5iweb2016121201/js/index.js"></script>
<script src="http://www.5iweb.com.cn/resource/5iweb2016112303/js/index.js"></script>
<script src="http://www.5iweb.com.cn/resource/5iweb2016090101/js/jquery.js"></script>
<script type="text/javascript" src="http://www.5iweb.com.cn/resource/5iweb2016090101/js/raphael.js"></script>
<script type="text/javascript" src="http://www.5iweb.com.cn/resource/5iweb2016090101/js/jquery.uled.js"></script>
</body>

</html>